<template>
    <div class="login">
        <div class="top">
            <div class="bg"></div>
            <img src="../assets/imgs/logo@2x.png" class="logo"> <br>
            <img src="../assets/imgs/logo-text.png" class="logo-text">
        </div>
        <div class="tabs">
            <div>注册</div>
        </div>
        <div class="form">
            <div class="input">
                <img :src="iconImgs[0]">
                <input type="text" placeholder="请输入手机号" v-model="form.phone" @blur="yzPhone">
            </div>
            <div class="yzCode">
                <div class="input">
                    <img :src="iconImgs[1]" style="width:17px">
                    <input type="text" placeholder="请输入验证码" v-model="form.yzCode">
                </div>
                <button @click="getYzCode">{{yzCodeText}}</button>
            </div>
            <div class="input password">
                <img :src="iconImgs[2]">
                <input type="password" placeholder="请输入密码" v-model="form.password">
            </div>
            <div class="agree">
                <div class="radio" :class="{active:isAgree}" @click="isAgree = !isAgree">
                    <span>✔</span>
                </div>
                <div class="text">注册即代表同意<router-link tag="a" to="/vipContent">《会员服务协议》</router-link></div>
            </div>
            <div class="btn">
                <button @click="register" :class="{gray:!isAgree}">注册</button>
            </div>
        </div>
        <!--<div class="login-footer">-->
            <!--<div>平台电话: 400-123465</div>-->
            <!--<div>服务时间: 8:00-20:00</div>-->
        <!--</div>-->
    </div>
</template>

<script>
    let iconImg = [
        require('../assets/imgs/username@2x.png'),
        require('../assets/imgs/yzcode@2x.png'),
        require('../assets/imgs/password@2x.png')
    ]
    export default {
        components:{},
        data() {
            return {
                iconImgs:iconImg,
                isClick:true,
                yzCodeText:"获取验证码",
                isAgree:false,
                form:{
                    phone:'',
                    yzCode:'',
                    password:''
                }
            };
        },
        mounted(){
            console.log(this.$route.query.uid);
        },
        methods:{
            yzPhone(){
                if(!this.form.phone){
                    this.$toast('手机号不能为空');
                    return
                }else if(!(/^1[3|4|5|7|8][0-9]{9}$/.test(this.form.phone))){
                    this.$toast('手机号格式不正确');
                    return
                }else{

                    this.$http.post('common/mobile', {
                            mobile:this.form.phone
                        }).then((res)=>{
                            if(res.code == 200){
                                this.$toast('该手机号已注册');
                            }
                        })
                }
            },
            register(){
                if(!this.isAgree) return;
                if(!this.form.phone){
                    this.$toast('手机号不能为空');
                    return
                }else if(!(/^1[3|4|5|7|8][0-9]{9}$/.test(this.form.phone))){
                    this.$toast('手机号格式不正确');
                    return
                }else if(!this.form.yzCode){
                    this.$toast('验证码不能为空');
                    return
                }else if(this.form.password.length<6 || this.form.password.length>16){
                    this.$toast('密码为6~16个字符');
                    return
                }else{
                    this.$http.post('common/register',{
                        user_tel:this.form.phone,
                        password:this.form.password,
                        captcha:this.form.yzCode,
                        original_id:this.$route.query.uid,
                        sex:""
                    }).then((res)=> {
                        if (res.code == 200) {
                            this.$toast('注册成功,请下载App');
                            setTimeout(function () {
                                window.location.href = 'http://m.leyuanip.com/download/index.html';
                            },1000);
                        }
                    })
                }


            },
            // 获取验证码
            getYzCode(){
                if(this.isClick){
                    if(!this.form.phone){
                        this.$toast('手机号不能为空');
                        return
                    }else if(!(/^1[3|4|5|7|8][0-9]{9}$/.test(this.form.phone))){
                        this.$toast('手机号格式不正确');
                        return
                    }
                    let startTime = 60;
                    this.isClick = false;
                    let timer = setInterval(()=>{
                        this.yzCodeText = startTime +'s重新获取';
                        if(!startTime){
                            clearInterval(timer);
                            this.yzCodeText = '获取验证码';
                            this.isClick = true;
                        }
                        startTime--;
                    },1000);
                    this.$http.post('common/sendsms',{
                        mobile:this.form.phone,
                        type:'register',
                    }).then((res)=>{
                        console.log(res)
                        if(res.code == 200){
                            this.$toast('短信发送成功');
                        }else{
                            this.$toast('发送失败');
                        }
                    })
                }
            }
        }

    }
</script>

<style lang="less" scoped>
    @main-color:#fa6183;
    .login{
        width: 100%;
        min-height: 100vh;
        overflow: hidden;
        .top{
            position: relative;
            width: 100%;
            height: 160px;
            text-align: center;
            background: @main-color;
            .bg{
                position: absolute;
                top:-50px;
                left:calc(50% - 275px);
                width: 550px;
                height: 250px;
                background: @main-color;
                border-radius: 50%;
            }
            .logo{
                position: relative;
                top:42px;
                width: 73px;
                border-radius: 5px;
                box-shadow: 0 0 5px 0 #ffffff;
            }
            .logo-text{
                position: relative;
                width: 238px;
                top:70px;
            }
        }
        .tabs{
            padding: 65px 15px 8px;
            border-bottom: 4px solid #eee;
            display: flex;
            justify-content: center;
            div{
                font-size: 17px;
                color:@main-color;
                padding-bottom: 5px;
            }
        }
        .form{
            width: 264px;
            margin: 20px auto 0;
            .input{
                border-radius: 23px;
                border: solid 1px #ff3e6c;
                display: flex;
                align-items: center;
                height: 45px;
                font-size: 15px;
                color: #918f8f;
                box-sizing: border-box;
                overflow: hidden;
                input{
                    height: 100%;
                    background: transparent;
                }
                img{
                    width: 15px;
                    margin-left: 15px;
                    margin-right: 13px;
                }
            }
            .yzCode{
                display: flex;
                justify-content: space-between;
                margin: 20px 0 20px;
                .input{
                    width: 150px;
                }
                button{
                    width: 99px;
                    height: 45px;
                    background-color: @main-color;
                    border-radius: 23px;
                    font-size: 14px;
                    color:white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0;
                    margin: 0;
                }
            }
            .password{
                margin: 20px 0 30px;
            }
            .agree{
                padding: 0 10px 15px;
                display: flex;
                align-items: center;
                .radio{
                    width: 20px;
                    height: 20px;
                    border:2px solid @main-color;
                    margin-right: 8px;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    box-sizing: border-box;
                    span{
                        color:white;
                        font-size:15px;
                    }
                }
                .active{
                    background: @main-color;

                }
                .text{
                    font-size: 14px;
                    color:#918f8f;
                    display: flex;
                    align-items: center;
                    a{
                        color:@main-color;
                    }
                }

            }
            .btn{
                margin-bottom: 5px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                button{
                    height: 45px;
                    width: 100%;
                    background-color: #ff3e6c;
                    border-radius: 23px;
                    font-size: 20px;
                    color: #ffffff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                span{
                  margin-top: 15px;
                  color:skyblue;
                  text-decoration: underline;
                }
                .gray{
                    background-color: #aaa;
                }
            }
        }
        .login-footer{
            margin-top: 20px;
            text-align: center;
            padding-bottom: 10px;
            div{
                font-size: 11px;
                letter-spacing: 1px;
                color: @main-color;
            }
        }
    }

</style>
